/*
 * 有赞授权
 * @Author: ljb
 * @Date: 2018-09-27 16:25:31
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-29 15:01:00
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-store-youzan-authorize {
        position: relative;
        padding: 0 5px 5px 5px;
        background-color: #f0f0f0;
        width: 100%;
        height: 100%;
        .content {
            display: flex;
            flex-direction: column;
            padding: 30px;
            height: 100%;
            background-color: #fff;
			box-sizing: border-box;
			border-radius:3px;
            .authorize-title {
                line-height: 1;
                font-size: 18px;
                color: #999;
                font-weight:400;
                .authorize-status {
                    color: #666;
                }
            }
            .info-area {
                position: relative;
                width:1530px;
                height:832px;
                margin-top: 14px;
                background-color: #F0F2F8;
                .authorize-area {
                    width: 1100px;
                    height: 500px;
                    box-shadow:0px 2px 6px rgba(0,0,0,0.04);
                }
                .unauthorized {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 200px;
                    margin: 0 auto;
                    text-align: center;
                    font-size: 0;
                    p {
                        margin: 20px 0 30px;
                        font-size: 18px;
                        color: rgba(77,79,92,0.50);
                    }
                    img {
                        width: 166px;
                    }
                    .auth-btn {
                        width: 150px;
                        height: 35px;
                        margin: 0 auto;
                        line-height: 35px;
                        background: rgba(45,140,240,1);
                        border-radius: 4px;
                        font-size: 15px;
                        font-weight: 400;
                        color: #fff;
                        cursor: pointer;
                    }
                }
            }
        }
    }

</style>
<template>
	<div class="v-store-youzan-authorize">
		<div class="content">
			<h3 class="authorize-title">{{ `${ $t('youzan.youzan_authorize') } - ` }}<span class="authorize-status">{{ authStatus(authorized) }}</span></h3>
			<div class="info-area">
				<div
					v-if="authorized"
					class="authorize-area align-vertical-center">
					<authorizeInfo
						:authorizer-info="authorizer_info"
						@change="gotoAuth"/>
				</div>
				<div
					v-else
					class="unauthorized">
					<img
						:src="no_auth_icon"
						alt="">
					<p>{{ $t('youzan.no_auth') }}</p>
					<div
						class="auth-btn"
						@click="gotoAuth">{{ $t('youzan.to_auth') }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

import API_LIST from 'src/API_LIST';

import { mapMutations, mapGetters } from 'vuex';

import authorizeInfo from 'src/views/component/youzan/authorize-info';

export default {
	name: 'YouzanAuthorizeViews',
	components: {
		authorizeInfo,
	},
	data() {
		return {
			authorized: false,
			authorizer_info: {
				shop_info: {},
				qr_code: '',
			},
			no_auth_icon: require('src/assets/img/weishouquan_icon.svg'),
		};
	},
	computed: {
		...mapGetters('userToken', [
			'getUserInfo',
			'getUserType',
			'getYouzanAuthorize',
		]),
	},
	mounted() {
		if (this.getYouzanAuthorize === 0) return; // 判断未授权有赞禁止调用接口
		this.fetchAuthShopInfo();
	},
	methods: {
		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
		 * 授权状态
		 * @param  {Boolean} authorized {是否授权}
		 * @return {String} {授权状态文字展示}
		 */
		authStatus(authorized) {
			return authorized ? this.$t('youzan.had_authorized') : this.$t('youzan.no_authorized');
		},

		/**
         * 跳转授权
         * @return {undefined}
         */
		gotoAuth() {
			let api_url = '';
			if (this.getUserType === 'store') {
				api_url = `${API_LIST.YOUZAN_AUTHORIZE}?store_id=${this.getUserInfo.store_id}`;
			} else {
				api_url = `${API_LIST.YOUZAN_AUTHORIZE}?customer_id=${this.getUserInfo.customer_id}`;
			}
			window.location.href = api_url;
		},

		/**
         * 有赞店铺授权信息
         * @return {undefined}
         */
		fetchAuthShopInfo() {
			this.showSpin(this.$t('common.please_wait'));

			this.$http.get(API_LIST.STORE_YOUZAN_SHOP)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.authorized = true;

					this.authorizer_info.shop_info = data.youzan_authorizer_info;

					this.authorizer_info.qr_code = data.qr_code;
				})
				.catch((err) => {
					this.authorized = false;
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);
		},
	},
};
</script>
